﻿<%@ Page Title="MyProject" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="MyProject.WebUI._Default" %>

<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <ext:Store ID="Store1" runat="server" OnRefreshData="Store1_RefreshData" OnSubmitData="Store1_Submit">
        <Reader>
            <ext:JsonReader>
                <Fields>
                    <ext:RecordField Name="Company" />
                    <ext:RecordField Name="Price" Type="Float" />
                    <ext:RecordField Name="Change" Type="Float" />
                    <ext:RecordField Name="PctChange" Type="Float" />
                    <ext:RecordField Name="LastChange" Type="Date" DateFormat="yyyy-MM-ddTHH:mm:ss" />
                </Fields>
            </ext:JsonReader>
        </Reader>
    </ext:Store>
    <ext:Hidden ID="FormatType" runat="server" />
    <ext:GridPanel ID="GridPanel1" runat="server" StoreID="Store1" Title="DataTable Grid"
        Width="600" Height="320" AutoExpandColumn="Company">
        <ColumnModel ID="ColumnModel1" runat="server">
            <Columns>
                <ext:Column ColumnID="Company" Header="Company" Width="160" DataIndex="Company">
                    <Editor>
                        <ext:TextField ID="TextField1" runat="server" />
                    </Editor>
                </ext:Column>
                <ext:Column Header="Price" Width="75" DataIndex="Price">
                    <Renderer Format="UsMoney" />
                    <Editor>
                        <ext:TextField ID="TextField2" runat="server" />
                    </Editor>
                </ext:Column>
                <ext:Column Header="Change" Width="75" DataIndex="Change">
                    <Renderer Fn="change" />
                </ext:Column>
                <ext:Column Header="Change" Width="75" DataIndex="PctChange">
                    <Renderer Fn="pctChange" />
                </ext:Column>
                <ext:DateColumn Header="Last Updated" Width="85" DataIndex="LastChange" />
            </Columns>
        </ColumnModel>
        <SelectionModel>
            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
        </SelectionModel>
        <LoadMask ShowMask="true" />
        <TopBar>
            <ext:Toolbar ID="Toolbar1" runat="server">
                <Items>
                    <ext:ToolbarFill ID="ToolbarFill1" runat="server" />
                    <ext:Button ID="Button1" runat="server" Text="To XML" Icon="PageCode">
                        <Listeners>
                            <Click Handler="exportData('xml');" />
                        </Listeners>
                    </ext:Button>
                    <ext:Button ID="Button2" runat="server" Text="To Excel" Icon="PageExcel">
                        <Listeners>
                            <Click Handler="exportData('xls');" />
                        </Listeners>
                    </ext:Button>
                    <ext:Button ID="Button3" runat="server" Text="To CSV" Icon="PageAttach">
                        <Listeners>
                            <Click Handler="exportData('csv');" />
                        </Listeners>
                    </ext:Button>
                </Items>
            </ext:Toolbar>
        </TopBar>
        <BottomBar>
            <ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="10" StoreID="Store1" />
        </BottomBar>
    </ext:GridPanel>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ScriptContent" runat="server">
    <script type="text/javascript">
		//<![CDATA[
        var template = '<span style="color:{0};">{1}</span>';

        var change = function (value) {
            return String.format(template, (value > 0) ? "green" : "red", value);
        };

        var pctChange = function (value) {
            return String.format(template, (value > 0) ? "green" : "red", value + "%");
        };

        var exportData = function (format) {
            FormatType.setValue(format);
            var store = GridPanel1.store;
            store.directEventConfig.isUpload = true;

            var records = store.reader.readRecords(store.proxy.data).records,
                values = [];

            for (i = 0; i < records.length; i++) {
                var obj = {}, dataR;

                if (store.reader.meta.id) {
                    obj[store.reader.meta.id] = records[i].id;
                }

                dataR = Ext.apply(obj, records[i].data);

                if (!Ext.isEmptyObj(dataR)) {
                    values.push(dataR);
                }
            }

            store.submitData(values);

            store.directEventConfig.isUpload = false;
        };
    //]]> </script>
</asp:Content>
